<template>
  <div class="type_0-outer" :class="{'has-margin':config_data.style_type==1}">
    <ul>
      <li v-for="row in list" :title="row.title">
        <img ref="img" :src="row.head_img" :alt="row.title">
      </li>
    </ul>
  </div>
</template>

<script>
import Conveyer from '@/assets/Conveyer.es6.js'
export default {
  name: "type_0",
  props: ['title','list','config','model_id','table_name','href'],
  data(){
    return {}
  },
  methods: {
    set_height(wh){
      let outer = this.$el.querySelector('ul');
      let w = outer.offsetWidth;
      outer.style.height = w/wh+'px';
    },
  },
  computed: {
    config_data(){
      try {
        return this.config ? JSON.parse(this.config) : {};
      } catch (e) {
        return {};
      }
    },
  },
  mounted(){
    let app = this;
    //渲染完成执行
    let speed = this.config_data.speed || 1.5;

    let imgs = this.$refs['img'];
    if (!imgs) return;
    let max_wh = 0, count = imgs.length;
    imgs.forEach(function (img){
      img.onload = function (){
        let wh = img.naturalWidth / img.naturalHeight;
        max_wh = Math.max(max_wh, wh);
        if (--count == 0) app.set_height(max_wh);
      }
    })
    let outer = this.$el.querySelector('ul');
    app.conveyer = new Conveyer(outer);
    setInterval(function (){
      app.conveyer.next()
    },speed*1000);
  }
}
</script>

<style scoped>
.type_0-outer{width: 100%;}
.type_0-outer.has-margin{padding: 6px;}
.type_0-outer>ul{height: 100%;position: relative;margin: auto;overflow: hidden;}
.type_0-outer.has-margin>ul{border-radius: 8px;}
.type_0-outer>ul>li{width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: left 0.3s;}
.type_0-outer>ul>li.conveyer-head{left: -100%;}
.type_0-outer>ul>li.conveyer-tail{left: 100%;}
.type_0-outer>ul>li>img{width: 100%;height: 100%;object-fit: cover;background: #fff;}
</style>